<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--
    promise
      1.承诺(未来的事情) 三个状态 pending fulfilled rejected
        状态一旦变化, 就凝固了 =>
      2.用于解决回调地狱的
      3. 创建promise  使用promise

      const p = new Promise((resolve, reject) => {
        resolve(res) 成功时调用该函数 pending -> fulfilled
        reject(err)  失败时调用该函数 pending -> rejected
      })

      p.then((res) => {
        成功的回调函数
      }).catch((err) => {
        失败的回调函数
      })




   -->

   <script>
    //  需求1: 两秒以后, 打印一个zs
    // setTimeout(() => {
    //   console.log('zs');
    // }, 2000);

    //  需求2: 两秒以后, 打印一个zs => 封装成一个函数
    // function fn() {
    //   setTimeout(() => {
    //     console.log('zs');
    //   }, 2000);
    // }
    // fn()

    //  需求3: 两秒以后, 打印一个zs => 封装成一个函数(具体做什么事 不写死)

    // function fn(callback) {
    //   setTimeout(() => {
    //     // 具体做啥 不能写死, 传啥做啥 => 回调函数
    //     // console.log('zs');
    //     callback()
    //   }, 2000);
    // }

    // fn(function() {
    //   console.log('zs');
    // })

    // fn(function() {
    //   console.log('ls');
    // })

    // fn(function() {
    //   console.log('ww');
    // })

    //  需求4: 等2s 打印zs  再等2s 打印ls
      // fn(function() {
      //   console.log('zs');

      //   fn(function() {
      //     console.log('ls');

      //     fn(function() {
      //       console.log('ww');
      //     })
      //   })
      // })

      // 回调函数 => 层层嵌套 => 回调地狱 => 导致代码难以维护 难以阅读
      // fn()


      function fn() {
        return new Promise((resolve, reject) => {
          // 封装异步操作....  延时器
          setTimeout(() => {
            resolve()
          }, 2000);
        })
        // return p
      }

      // fn().then(() => {
      //   console.log('zs');
      //   // 相当于又等了2s
      //   return fn()
      // }).then(() => {
      //   console.log('ls');
      //   return fn()
      // }).then(() => {
      //   console.log('ww');
      // })

      // async await 语法糖(简写形式)
      async function test() {
        await fn()
        console.log('zs');

        await fn()
        console.log('ls');

        await fn()
        console.log('ww');
      }

      test()

      // 异步问题
      // 核心: 等一个异步操作结束以后 做某件事
      // 方案: 1.回调函数 => 回调地狱
      //      2.promise封装 => 得到promise .then().catch() / async await

      // 异步: 回调 => promise => generator(dva) => async await


   </script>
</body>
</html>
